<template>
  <div class="questions-container">
    <!-- 问答列表 -->
    <div class="questions-list">
      <div 
        v-for="question in questions" 
        :key="question.id"
        class="question-card"
      >
        <div class="question-header">
          <div class="author-info">
            <el-avatar :src="question.author.avatar" :size="40"></el-avatar>
            <div class="author-details">
              <span class="author-name">{{ question.author.name }}</span>
              <span class="post-time">{{ formatTime(question.createTime) }}</span>
            </div>
          </div>
          <div class="question-status" :class="getStatusClass(question.status)">
            {{ getStatusText(question.status) }}
          </div>
        </div>

        <div class="question-content">
          <h3 class="question-title">{{ question.title }}</h3>
          <p class="question-desc">{{ question.content }}</p>
          <div class="question-tags">
            <span 
              v-for="tag in question.tags" 
              :key="tag"
              class="tag"
            >#{{ tag }}</span>
          </div>
        </div>

        <div class="question-footer">
          <div class="stats">
            <span class="stat-item">
              <i class="fas fa-eye"></i>
              {{ question.views }}
            </span>
            <span class="stat-item">
              <i class="fas fa-comment"></i>
              {{ question.answers }}
            </span>
            <span class="stat-item">
              <i class="fas fa-thumbs-up"></i>
              {{ question.likes }}
            </span>
          </div>
          <button class="answer-btn" @click="showAnswerDialog(question)">
            回答问题
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Questions',
  
  data() {
    return {
      questions: [
        {
          id: 1,
          title: '如何优化API响应速度？',
          content: '我的API在高并发情况下响应较慢，有什么好的优化方案吗？',
          author: {
            name: '张三',
            avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=dev1'
          },
          createTime: '2024-03-15T10:30:00',
          status: 'open',
          tags: ['性能优化', 'API', '高并发'],
          views: 1234,
          answers: 5,
          likes: 23
        },
        {
          id: 2,
          title: 'Vue3和Vue2在性能上有什么区别？',
          content: '最近在考虑是否将项目从Vue2升级到Vue3，想了解两者在性能上的主要区别。',
          author: {
            name: '李四',
            avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=dev2'
          },
          createTime: '2024-03-14T15:20:00',
          status: 'solved',
          tags: ['Vue3', 'Vue2', '性能'],
          views: 856,
          answers: 8,
          likes: 45
        },
        {
          id: 3,
          title: '如何实现JWT token刷新机制？',
          content: '在前后端分离项目中，如何优雅地实现JWT token的自动刷新？',
          author: {
            name: '王五',
            avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=dev3'
          },
          createTime: '2024-03-13T09:15:00',
          status: 'open',
          tags: ['JWT', '认证', '安全'],
          views: 567,
          answers: 3,
          likes: 12
        }
      ]
    }
  },

  methods: {
    formatTime(time) {
      const date = new Date(time);
      const now = new Date();
      const diff = now - date;
      
      if (diff < 60000) { // 小于1分钟
        return '刚刚';
      } else if (diff < 3600000) { // 小于1小时
        return `${Math.floor(diff / 60000)}分钟前`;
      } else if (diff < 86400000) { // 小于1天
        return `${Math.floor(diff / 3600000)}小时前`;
      } else {
        return date.toLocaleDateString();
      }
    },

    getStatusClass(status) {
      return {
        'open': 'status-open',
        'solved': 'status-solved',
        'closed': 'status-closed'
      }[status];
    },

    getStatusText(status) {
      return {
        'open': '待解决',
        'solved': '已解决',
        'closed': '已关闭'
      }[status];
    },

    showAnswerDialog(question) {
      console.log('回答问题:', question.id);
    }
  }
}
</script>

<style scoped>
.questions-container {
  padding: 2rem;
}

.question-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.question-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-weight: 500;
  color: #1a237e;
}

.post-time {
  font-size: 0.9rem;
  color: #666;
}

.question-status {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

.status-open {
  background: rgba(33, 150, 243, 0.1);
  color: #2196f3;
}

.status-solved {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.status-closed {
  background: rgba(158, 158, 158, 0.1);
  color: #9e9e9e;
}

.question-content {
  margin-bottom: 1.5rem;
}

.question-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a237e;
  margin-bottom: 0.75rem;
}

.question-desc {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.question-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  padding: 0.25rem 0.75rem;
  background: #f0f2f5;
  color: #666;
  border-radius: 20px;
  font-size: 0.9rem;
}

.question-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.stats {
  display: flex;
  gap: 1.5rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

.answer-btn {
  padding: 0.5rem 1.5rem;
  background: #1a237e;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.answer-btn:hover {
  background: #0d47a1;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .questions-container {
    padding: 1rem;
  }
}
</style> 